<template>
  <div class="father">
    <div class="test one">商品管理</div>
    <div class="test two">
      <el-button  @click="location.href = 'goodsadd.html'">
        <i
          class="fa fa-plus-square"
          aria-hidden="true"
          style="font-size: 20px"
        ></i
        >商品添加
      </el-button>
    </div>
    <div class="test three">
      <el-button @click="location.href = 'goods-classify.html'">
        <i
          class="fa fa-sort-amount-desc"
          aria-hidden="true"
          style="font-size: 20px"
        ></i
        >分类管理
      </el-button>
    </div>

    <div class="end">
      <div class="test four">
        <el-button>
          <i
            class="fa fa-search"
            aria-hidden="true"
            style="font-size: 20px"
          ></i>
        </el-button>
      </div>
      <div class="test five">
        <el-button><i class="fa fa-glass" aria-hidden="true"></i></el-button>
      </div>
      <div class="test six">
        <el-button @click="changeModel">
          切换查看
          <i class="fa fa-window-restore" aria-hidden="true"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      seen: false,
    };
  },
  methods: {
    changeModel() {
      this.seen = !this.seen;
      this.$emit("mode", this.seen);
    },

    methods: {
        changeModel(){
            this.seen=!this.seen;
            this.$emit('mode',this.seen)

        }
            
    }
}

  };


</script>

<style scoped>
.test i {
  font-size: 20px;
}

.end {
  display: inline-block;
  position: relative;
  float: right;
}

.test {
  display: inline-block;
}

.father {
  float: right;
  position: absolute;
  left: 0%;
  width: 100%;
  height: 95%;
  top: -8%;
  padding-top: 15px;
  background-color: silver;

  
}

.one {
  padding: 25px;
  border-right-style: groove;
  border-bottom-style: none;
  border-left-style: none;
  border-top-style: none;
  display: inline-block;
}

.two {
  padding: 25px;
  display: inline-block;
}

.three {
  padding: 25px;
  display: inline-block;
}

.fa {
  color: rgba(0, 0, 0, 0.5);
}

.five {
  padding: 20px;
}

.six {
  padding: 25px;
  border-left-style: groove;
  border-bottom-style: none;
  border-right-style: none;
  border-top-style: none;
  display: inline-block;
}
</style>